<template>
	<view>
		<view class="loginBox">
			<view class="title">
				用户登录
			</view>
			<view class="loginForm">
				<view class="list">
					<image src="../../static/images/user.png" mode="widthFix"></image>
					<input v-model="loginForm.username" type="text" placeholder="请输入用户名"
						placeholder-class="placeholder" />
				</view>
				<view class="list">
					<image src="../../static/images/pwd.png" mode="widthFix"></image>
					<input v-model="loginForm.password" type="password" placeholder="请输入密码"
						placeholder-class="placeholder" />
				</view>
				<view class="list">
					<picker selector-type="picker" @change="bindPickerChange" :value="index" :range="shebeiList"
						range-key="machineName">
						<view class="uni-input"><span
								style="margin-right: 10rpx;">设备:</span>{{shebeiList.length>0?shebeiList[index].machineName:''}}
						</view>
					</picker>
					<image class="down" src="../../static/images/down.png" mode="widthFix"></image>
				</view>
				<view class="checkPwd" @click="checkPwd = !checkPwd">
					<image v-if="checkPwd" src="../../static/images/checked.png" mode="widthFix"></image>
					<image v-else src="../../static/images/check.png" mode="widthFix"></image>
					<span>记住密码</span>
				</view>
				<view class="btn" @click="login">
					登录
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				checkPwd: false,
				loginForm: {
					username: '',
					password: ''
				},
				shebeiList: [],
				index: 0,

			};
		},
		onShow() {
			let loginForm = uni.getStorageSync('loginForm') ? uni.getStorageSync('loginForm') : ''
			if (loginForm) {
				this.loginForm = uni.getStorageSync('loginForm')
			}



		},
		mounted() {},
		onLoad() {
			this.getSheBei()
		},
		methods: {
			getSheBei() {
				let data = {
					pageNo: 1,
					pageSize: 999
				}
				this.$api.baseMachinelist().then(res => {
					this.shebeiList = res.result.records


					// 设置以前选中的设备
					let machineNo = uni.getStorageSync('machineNo') ? uni.getStorageSync('machineNo') : ''

					if (machineNo) {
						this.shebeiList.forEach((item, index) => {
							if (item.machineNo == machineNo) {
								this.index = index
							}
						})
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			login() {
				if (this.loginForm.username == '' || this.loginForm.password == '') {
					return this.$tip('用户名或密码不能为空')
				}


				let machineNo = this.shebeiList[this.index].machineNo

				if (!machineNo) {
					return this.$tip('请选择设备')
				}
				this.$api.login(this.loginForm).then(res => {
					console.log(res.result.token)
					uni.setStorageSync('token', res.result.token)
					uni.setStorageSync('userInfo', res.result.userInfo)
					uni.setStorageSync('machineNo', machineNo)



					if (this.checkPwd) {
						uni.setStorageSync('loginForm', this.loginForm)
					} else {
						uni.removeStorageSync('loginForm')
					}

					let element = document.documentElement;
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.mozRequestFullScreen) {
						/* Firefox */
						element.mozRequestFullScreen();
					} else if (element.webkitRequestFullscreen) {
						/* Chrome, Safari & Opera */
						element.webkitRequestFullscreen();
					} else if (element.msRequestFullscreen) {
						/* IE/Edge */
						element.msRequestFullscreen();
					}
					this.$navTo('pages/index/index')
				})

			}

		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-image: url("../../static/images/loginbg.png");
		background-size: 100% 100%;
	}

	.loginBox {
		width: 50%;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 80rpx 60rpx;
		padding-bottom: 120rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-image: url("../../static/images/colorbg.png");
		background-size: 100% 100%;

		.title {
			text-align: center;
			font-size: 70rpx;
			color: #fff;
			margin-bottom: 100rpx;
		}

		.loginForm {
			width: 90%;
			margin: 0 auto;

			.list {
				position: relative;
				box-sizing: border-box;
				padding: 0 40rpx;
				border: 1px solid #046EB5;
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				padding: 25rpx 30rpx;
				border-radius: 10rpx;
				min-height: 100rpx;

				.down {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 30rpx;
					height: auto;
				}

				picker {
					color: #fff;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					padding-left: 40rpx;
					font-size: 34rpx;
				}

				image {
					width: 40rpx;
					margin-right: 20rpx;
					height: 40rpx;
				}

				input {
					font-size: 36rpx;
					color: #fff;
				}
			}

			.checkPwd {
				display: flex;
				align-items: center;
				margin-bottom: 80rpx;
				color: #fff;

				image {
					width: 40rpx;
					margin-right: 20rpx;
					height: 40rpx;
					border-radius: 10rpx;
				}
			}

			.btn {
				width: 100%;
				background-color: #005EF2;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 38rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>